<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>

    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>

        //原生JS方式发送 Ajax请求
        function run() {

            //1.核心对象
            var xmlhttp;

            //2.判断浏览器类型
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //3.建立连接
            xmlhttp.open("GET","/login?username=tom",true);

            //4.发送请求
            xmlhttp.send();

            //5.获取响应结果
            xmlhttp.onreadystatechange=function() {

                //readyState==4 请求已完成，且响应已就绪
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   var text =xmlhttp.responseText;
                   alert("响应结果: " + text);
                }
            }

        }


        //JQuery GET方式
        function run2() {

            //1.url
            var url = "/login";

            //2.数据
            var data = {username:"jack"};

            //3.发送GETq请求
            $.get(url,data,function (param) {

                alert("GET异步请求 响应成功: " + param);
            },"text")
        }

        //JQuery POST方式
        function run3() {

            //1.url
            var url = "/login";

            //2.数据
            var data = {username:"lucy"};

            //3.发送GETq请求
            $.post(url,data,function (param) {

                alert("POST异步请求 响应成功: " + param);
            },"text")
        }

        //Ajax
        function run4() {

            $.ajax({
                url:"/login",
                async:false, //是否异步
                data:{username:"giao"},
                type:"GET", //请求方式
                dataType:"text", //返回数据的数据类型
                success:function (param) {
                    alert("响应成功!" + param);
                },
                error:function () {
                    alert("响应失败!")
                }
            });

        }
    </script>
</head>
<body>
    <input type="button" value="原生JS发送异步请求" onclick="run()"><br>
    局部刷新 <input type="text"><br>

    <input type="button" value="JQuery GET方式发送异步请求" onclick="run2()"><br>

    <input type="button" value="JQuery POST方式发送异步请求" onclick="run3()"><br>

    <input type="button" value="JQuery Ajax方式发送异步请求" onclick="run4()"><br>
</body>
</html>